<template>
  <div class="index-number">
    <a-form-item label="发文机关" :rules="[formItem.rule]" :extra="formItem.extra"
      :style="{ marginLeft: formItem.marginLeft + 'px' }" class="form-a-radio-group">
      <a-select v-model:value="formItem.value['indexNumRuleIssueCode']" :placeholder="formItem.placeholder"
        :options="formItem.codeOption"></a-select>
    </a-form-item>
    <a-form-item label="基础分类" :rules="[formItem.rule]" :extra="formItem.extra"
      :style="{ marginTop: 16 + 'px', marginLeft: formItem.marginLeft + 'px' }" class="form-a-radio-group">
      <a-select v-model:value="formItem.value['indexNumRuleBaseCateCode']" :placeholder="formItem.placeholder"
        :options="formItem.basicOption"></a-select>
    </a-form-item>
    <a-form-item label="主题分类" :rules="[formItem.rule]" :extra="formItem.extra"
      :style="{ marginTop: 16 + 'px', marginLeft: formItem.marginLeft + 'px' }" class="form-a-radio-group">
      <a-select v-model:value="formItem.value['indexNumRuleTopicCode']" :placeholder="formItem.placeholder"
        :options="formItem.topicOption"></a-select>
    </a-form-item>
    <a-form-item label="是否有效" :rules="[formItem.rule]" :extra="formItem.extra"
      :style="{ marginTop: 16 + 'px', marginLeft: formItem.marginLeft + 'px' }" class="form-a-radio-group">
      <div class="radio-box">
        <a-radio-group v-model:value="formItem.value['indexNumRuleIsValid']">
          <template v-for="(options, index_options) in formItem.effectOptions" :key="index_options">
            <a-radio :value="formItem.isBoolean ? (index_options ? false : true) : (+index_options + 1)">
              {{ options }}
            </a-radio>
          </template>
        </a-radio-group>
      </div>
    </a-form-item>
    <div class="help-msg" v-if="formItem.helpMsg">
      {{ formItem.helpMsg }}
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, watch, computed } from "vue"
import { dataSourceType } from "@/type.d";
import { useColumnItem } from '@/components/draggable/hooks/useColumnModel';

//props
const props = defineProps({
  formItem: {
    type: Object,
    default: {} as dataSourceType
  },
})
const formItem: any = ref(props.formItem as any);
console.log(formItem.value, 4343545);
//useColumnItem(computed(() => props.formItem), formItem)


</script>

<style lang="less" scoped>
::v-deep(.ant-select-single:not(.ant-select-customize-input) .ant-select-selector) {
  width: auto
}

::v-deep(.ant-form-item-control-input) {
  width: auto
}

.only-label {
  ::v-deep(.ant-form-item-control) {
    height: 0;
  }
}

.help-msg {
  margin-top: 8px;
  font-size: 12px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.45);
  line-height: 20px;
}
</style>